<template>
	<app-layout>
		<!-- @cek="receive(recpakid)" -->
		<view class="give">
			<view class="" v-if="!isnoshare">
				<u-popup :customStyle="custyle" :maskCloseAble="false" v-model="removeshow" mode="center"
					@close="removeshow = false" v-if="removeshow">
					<view class="">
						<view class="reden">
							<view class="redtop">
								<view class="redtoptext">
									<view class="dir-left-wrap cross-center main-center">
										<image class="redavatar" :src="msguser.userInfo.avatar" mode=""></image>
										<view class="" style="font-weight: 700;">
											{{msguser.nickname}}发放的金币
										</view>
									</view>
									<view class="u-line-3" style="font-size: 42rpx;margin: 24rpx 0 0;">
										{{msgtitle}}
									</view>
								</view>
							</view>
							<view class="redopen" :animation="openbrnanimation" @click="openbtn(recpakid)">
								開
							</view>
						</view>
						<view class="redcon">
							<view class="redbtn" @click="removeshow = false">
								<icon style="font-weight: 700;" type="cancel" color="#e6cea0" size="32" />
							</view>
						</view>
					</view>
				</u-popup>
				<view class="content btwo" v-if="isjoinred == 0">
					<view class="title">请领取金币</view>
					<!-- <view class="time">分享文字</view> -->
					<view class="title bt-receive" @click="removeshow = true">
						领取金币
					</view>
					<!-- <view class="time goldsuf" @click="togolgmall">查看我领取过的金币红包 >>></view> -->
				</view>
				<view class="content bone" v-else-if="isjoinred == 1">
					<view class="title">恭喜您领到群主发放的红包</view>
					<!-- <view class="time">分享文字</view> -->
					<view class="collect">
						{{reviednum}} <text class="goldsuf">金币</text>
					</view>
					<view class="time goldsuf" @click="togolgmall">查看我领取过的金币红包 >>></view>
				</view>
				<view class="content btwo" v-else-if="isjoinred == 2">
					<view class="resulr">
						{{resultmsg}}
					</view>
					<view class="time goldsuf" @click="togolgmall">查看我领取过的金币红包 >>></view>
				</view>
				<view class="content btwo" v-else-if="isjoinred == 3">
					<view class="resulr">
						红包已被领完了
					</view>
					<view class="time goldsuf" @click="togolgmall">查看我领取过的金币红包 >>></view>
				</view>
			</view>
			<view class="user-list" :style="{margin:!isnoshare ? '24rpx auto 0' : '0 auto'}">
				<view class="title" v-if="!isnoshare && isjoinred != 2">
					本轮共可领{{detail.lottery_num}}个包共{{detail.prize_num}}金币，已领取{{revnum}}/{{detail.lottery_num}}
					<!-- {{}}个包共{{}}金币，已抢完 -->
				</view>
				<scroll-view scroll-y="true" class="user-list-s" @scrolltolower="getList(recpakid)"
					:style="{height:!isnoshare ? 'calc(100vh - 756rpx)' : 'calc(100vh - 276rpx)'}">
					<view>
						<view class="dir-left-nowrap cross-center user-list-li" v-for="(item,index) in userlist"
							:key="index">
							<view class="image">
								<image class="image" :src="item.user.userInfo.avatar" mode=""></image>
							</view>
							<view class="dir-left-nowrap cross-center main-between user-info">
								<view class="user-info u-line-2">
									{{item.user.nickname}}
								</view>
								<view class="rec-gold">
									+{{item.receive_time}}金币
								</view>
							</view>
						</view>
						<view class="nopt" v-if="userlist.length == 0">
							暂未有人领取
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <view class="card-modal dir-top-nowrap cross-center main-center">
			<view class="modal-content" :style="{backgroundImage: `url(`+img_finish_receiving+`)`}">
				<view class="error">sss</view>
				<view class="modal-btn" @click="btnClick"></view>
			</view>
		</view> -->
		<view class="bottomimg" @click="tourlste(tourlsrc)">
			<image class="bottom-img" :src="tourlimg"></image>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import AppRelatedSuggestionProduct
	from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product';
	import appShareQrCode from '../../../components/page-component/app-share-qr-code-poster/app-share-qr-code-poster.vue';
	import uPopup from '../../../components/basic-component/u-popup/u-popup.vue';
	import jump from '../../../core/jump.js';
	export default {
		name: "give",
		components: {
			AppRelatedSuggestionProduct,
			appShareQrCode,
			uPopup
		},
		data() {
			return {
				// 红包弹窗 加按钮
				removeshow: false,
				custyle: {
					'background-color': 'rgba(255, 255, 255, 0.1)',
				},
				openbrnanimation: {},
				msgtitle: '',
				msguser: {},

				shareShow: false,
				modal: {
					show: false,
					msg: '',
					is_show_back: false
				},
				coupon: null,
				user_id: 0,
				img_finish_receiving: null,
				userlist: [ // 用户
					/* {
						avatar: '/static/image/icon/announcement.png',
						nickname: '昵称',
						recgold: 60
					} */
				],
				recstatus: 0,
				resultmsg: '',
				reviednum: 0, // 领取的红包金额
				surplusnum: 0, // 红包剩余数量
				detail: '',
				revnum: 0, // 已领取的红包数量
				isnoshare: false,
				recpakid: 0,

				isjoinred: 0, // 是否参与本次活动 0 未参与 1 参与 2 活动结束 3 红包已被领完

				tourlimg: '',
				tourlsrc: '',

				page: 1,
				page_count: 1
			};
		},
		onLoad(options) {
			if (!this.$user.isLogin()) {
				this.$store.dispatch('user/accessToken')
			}
			this.isnoshare = options.isnoshare || false
			this.recpakid = options.recpakid || 0
			this.onReq(259)
			// 判断是否需要开红包

			this.getList(options.recpakid)
			this.receive(options.recpakid, 1);
			// if (this.isnoshare) {
			// this.getList(options.recpakid)
			// } else {
			// 	this.receive(options.recpakid);
			// }
			// this.getList(options.recpakid)
			// console.log(options);
			// if (typeof options.user_id !== 'undefined') {
			// 	this.user_id = options.user_id;
			// }
			// this.getList(options.coupon_id);
		},
		onReachBottom() {
			if (this.page_count >= this.page) {
				this.getList(this.recpakid);
			}
		},
		methods: {
			onReq(kid) {
				this.$request({
					url: this.$api.navs.catedetail,
					data: {
						keyword: kid
					}
				}).then((res) => {
					if (kid == 259) {
						this.tourlimg = res.data.list[0].icon_url
						this.tourlsrc = res.data.list[0].url
					}
				}).catch(() => {

				})
			},
			tourlste(url) {
				if (url == 'javascript:;') {
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			// 红包效果
			openbtn(recpakid) {
				var that = this;
				if (that.$user.isLogin()) {
					var animation = uni.createAnimation({
						duration: 1000,
						timingFunction: 'ease',
					})
					that.openbrnanimation = animation;
					// animation.rotate3d(0,1,0,360).step();
					animation.rotateY(360).step();
					that.openbrnanimation = animation.export();
					setTimeout(function() {
						that.removeshow = false;
						that.openbrnanimation = {};
						that.isjoinred = 1
						that.receive(recpakid, 0);
						// that.getList(recpakid)
					}, 1000);
				} else {
					that.$store.dispatch('user/accessToken')
				}
			},
			getList(recpakid) {
				// this.$showLoading();
				this.$request({
					url: this.$api.gcredpak.record + '&page=' + this.page,
					method: 'post',
					data: {
						pid: recpakid,
					}
				}).then(response => {
					this.$hideLoading();
					if (response.code == 0) {
						// this.userlist = response.data.list
						this.revnum = response.data.pagination.total_count;
						if (this.page !== 1) {
							this.userlist = this.userlist.concat(response.data.list);
						} else {
							this.userlist = response.data.list;
							this.page_count = response.data.pagination.page_count;
						}
						this.page = response.data.list.length ? this.page + 1 : this.page;
					}
				}).catch(response => {
					this.$hideLoading();
				})
			},
			btnClick() {
				if (this.modal.is_show_back) {
					jump({
						open_type: 'redirect',
						url: '/pages/index/index'
					})
				} else {
					this.modal.show = false;
				}
			},
			togolgmall() {
				uni.navigateTo({
					url: '/pages/consumer/redpaklist/redpaklist'
				})
			},
			// 领取金币
			receive(recpakid, ischeck) {
				if (this.$user.isLogin()) {
					let formadata = {
						"lottery_id": recpakid
					}
					if (ischeck) {
						formadata = {
							"lottery_id": recpakid,
							"check": 1
						}
					}
					// this.$showLoading();
					this.$request({
						url: this.$api.gcredpak.receive,
						method: 'post',
						data: {
							formdata: JSON.stringify(formadata)
						}
					}).then(response => {
						// console.log(response);
						this.detail = response.data.detail
						this.revnum = response.data.lqcount
						// 查询当前用户 领取状态
						if (ischeck) {
							if (response.data.notice == "活动结束") {
								// console.log('888');
								this.removeshow = false
								this.isjoinred = 2
								this.resultmsg = response.data.notice
							} else if (response.data.isjoin) { // 参加活动
								// console.log(666);
								this.isjoinred = 1
								this.reviednum = response.data.receivejbbum
								this.removeshow = false
							} else if (response.data.isjoin == false) {
								if (response.data.syjbnum) {
									this.isjoinred = 0
									this.removeshow = true
									this.msgtitle = response.data.detail.name
									this.msguser = response.data.detail.user
								} else {
									this.removeshow = false
									this.isjoinred = 3 // 红包已领完
								}
							} else {
								this.removeshow = false
								// this.isjoinred = false
								// this.removeshow = true
							}
						} else {
							// console.log('999');
							this.reviednum = response.data.rednum
							this.getList(recpakid)
						}
						/* if (response.code == 0) {
							this.reviednum = response.data.rednum
							// this.surplusnum = res.data.result
							this.recstatus = 1
						} else {
							this.resultmsg = response.data.notice
							this.recstatus = 2
						} */
						// this.getList(recpakid)
					})
				} else {
					this.$store.dispatch('user/accessToken')
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.bottomimg {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200rpx;

		.bottom-img {
			width: 100%;
			height: 200rpx;
		}
	}

	.reden {
		background-color: #e2614c;
		width: 600rpx; // 628
		height: 840rpx; // 968
		border-radius: 14rpx; // 52
		position: relative;
		overflow: hidden;

		.redtop {
			position: relative;
			overflow: hidden;
			// background-color: #e16752;
			width: 100%;
			height: 540rpx; // 720

			&::after {
				width: 180%;
				height: 540rpx;
				position: absolute;
				left: -40%;
				top: 0;
				z-index: 99;
				content: '';
				border-radius: 0 0 50% 50%;
				background: #e16752;
				box-shadow: 0 1rpx 10rpx rgba(0, 0, 0, 0.5);
			}

			.redtoptext {
				position: absolute;
				z-index: 100;
				width: 580rpx;
				top: 120rpx;
				left: 50%;
				text-align: center;
				transform: translateX(-50%);
				color: #fce4b8;
				font-size: 32rpx;

				.redavatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 16rpx;
				}
			}
		}

		.redopen {
			position: absolute;
			bottom: 210rpx; // 150
			// left: 50%;
			// transform: translateX(-50%);
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			background-color: #ffd287; // ffd287 e6cea0
			color: #fef5e8;
			box-shadow: 2upx 2upx 6upx rgba(0, 0, 0, 0.2);
			text-align: center;
			line-height: 180rpx;
			font-size: 54rpx;
			z-index: 100;
		}
	}

	.redcon {
		margin: 32rpx auto;
		border-radius: 14upx;

		.redbtn {
			width: 80upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			margin: 0 auto;
		}
	}

	.give {
		// background-color: #ffffff;
	}

	.content {
		height: 420rpx;
		// background-color: rgba(255, 0, 0, 0.1);
		background-color: #FFFFFF;
		width: #{750rpx};
		// height: #{880rpx};
		// padding-top: #{46rpx};
		// padding-bottom: 120rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.resulr {
			font-size: 32rpx;
			font-weight: 700;
		}

		&.bone {
			background-color: rgba(255, 0, 0, 0.01);
		}

		&.btwo {
			background-color: rgba(0, 0, 0, 0.03);
			// color: #545454;
		}

		/* &::after {
			width: 150%;
			height: 210rpx;
			position: absolute;
			left: -25%;
			top: 0;
			z-index: 99;
			content: '';
			border-radius: 0 0 50% 50%;
			background: #e2614c;
			// box-shadow: 0 1rpx 10rpx rgba(0, 0, 0, 0.5);
		} */

		.avatar {
			width: #{130rpx};
			height: #{130rpx};
			margin: #{0 auto 30rpx auto};
			border-radius: #{130rpx};
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.nickname {
			font-size: $uni-font-size-general-one;
			line-height: 1;
		}

		.collect {
			font-size: 56rpx;
			color: #9a5e3b;

			.goldsuf {
				margin-left: 12rpx;
				font-size: 24rpx;
				color: #9a5e3b;
			}
		}

		.title {
			font-size: 42rpx;
			margin: 0 0 56rpx;
			line-height: 1;
		}

		.bt-receive {
			width: 204rpx;
			height: 60rpx;
			border-radius: 16rpx;
			text-align: center;
			line-height: 60rpx;
			margin: 0 auto;
			// border: 1rpx solid #ffd287;
			// color: #ffd287;
			background: #CD9C62;
			color: #FFF;
			font-size: 32rpx;
		}

		.pic {
			margin: #{90rpx auto 0 auto};
			width: #{636rpx};
			height: #{200rpx};
			padding: #{0 16rpx 0 24rpx};

			.coupon-left {
				width: #{174rpx};
				height: 100%;
				color: #ffffff;
				font-size: #{56rpx};

				.discount {
					&:after {
						content: '折';
						font-size: #{32rpx};
					}
				}

				.sub {
					&:before {
						content: '￥';
						font-size: #{32rpx};
					}
				}
			}

			.coupon-right {
				width: #{300rpx};
				height: 100%;
				font-size: $uni-font-size-import-two;

				.margin-top {
					margin-top: #{16rpx};
					font-size: $uni-font-size-general-one;
				}
			}
		}

		.time {
			margin: #{45rpx 0};
			// font-size: $uni-font-size-weak-one;
			font-size: 28rpx;
			font-weight: 300;
		}

		.card-btn {
			width: #{284rpx};
			height: #{76rpx};

			&.btn-1 {
				margin: #{410rpx auto 0 auto};
			}

			&.btn-0 {
				&:first-child {
					margin-right: #{38rpx};
				}
			}
		}
	}

	.user-list {
		// width: 100%;
		// padding: 24rpx 96rpx;
		// width: 550rpx;
		background-color: #FFFFFF;
		margin: 24rpx auto 0;
		// background-color: #f9a006;
		font-size: 24rpx;
		padding: 24rpx;
		// border-radius: 12rpx;

		.title {
			font-size: 24rpx;
			line-height: 60rpx;
			border-bottom: 1rpx solid #e8e8e8;
		}

		.user-list-s {
			// height: 720rpx;
			// height: 54vh;
			height: calc(100vh - 556rpx);
			// color: #FFFFFF;
			padding-top: 12rpx;
		}

		.user-list-li {
			height: 100rpx;
			// margin: 12rpx 0;
			border-bottom: 1rpx solid #e8e8e8;
			padding: 12rpx 16rpx;
			// line-height: 60rpx;

			.image {
				width: 76rpx;
				height: 76rpx;
				border-radius: 12rpx;
				margin-right: 12rpx;
			}

			.rec-gold {}

			.user-info {
				flex: 1;
			}
		}
	}

	.card-modal {
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;

		.modal-content {
			width: #{600rpx};
			height: #{528rpx};
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;

			.error {
				margin: #{290rpx auto 0 auto};
				text-align: center;
				font-size: $uni-font-size-import-one;
			}

			.modal-btn {
				margin: #{62rpx auto 0 auto};
				width: #{520rpx};
				height: #{90rpx};
				border-radius: #{90rpx};
			}
		}
	}

	.nopt {
		text-align: center;
		line-height: calc(100vh - 556rpx);
		font-size: 24rpx;
	}
</style>
